<template>
  <ContentWrap :style="`height: ${contentHeight}px; overflow: hidden;`">
    <div class="mb-10px routeHeader">
      <template v-if="[10, 20].includes(formData.dictStatus)">
        <el-button
          @click="submitForm('save')"
          type="primary"
          :disabled="formLoading"
          v-if="formType === 'update'"
          v-hasPermi="['quality:maintain-post-service-task:save']"
          >保存</el-button
        >
        <el-button
          @click="submitForm('handle')"
          type="primary"
          :disabled="formLoading"
          v-if="formType === 'update'"
          v-hasPermi="['quality:maintain-post-service-task:save']"
          >完成</el-button
        >
      </template>
      <el-button
        @click="printService"
        type="primary"
        :disabled="formLoading"
        v-hasPermi="['quality:maintain-post-service-task:print']"
        >打印服务单</el-button
      >
      <el-button @click="goBack">关闭</el-button>
    </div>
    <!-- 信息 -->
    <el-scrollbar :max-height="`${contentHeight - 73}px`">
      <info ref="infoRef" :formType="formType" :detailData="formData" />
    </el-scrollbar>
  </ContentWrap>
  <!-- 打印 -->
  <div v-show="false" id="printData" >
    <print formType="view" :showAdd="false" :detailData="formData" />
  </div>
</template>
<script setup lang="ts">
import * as MaintainPostServiceTaskApi from '@/api/quality/maintenanceManagement/maintainPostServiceTask'
import { useTagsViewStore } from '@/store/modules/tagsView'
import info from './info.vue'
import print from './print.vue'

const message = useMessage() // 消息弹窗

const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  taskNumber: undefined,
  internalRelationId: undefined,
  creatorName: undefined,
  customerName: undefined,
  customerContacts: undefined,
  customerMobile: undefined,
  productNumber: undefined,
  productInstallDate: undefined,
  customerAddress: undefined,
  dictPostType: undefined,
  failureDescription: undefined,
  failureHandling: undefined,
  failureCause: undefined,
  dictStatus: undefined,
  dictServiceEvaluate: undefined,
  materialsExpenses: undefined,
  costOfLabor: undefined,
  truckingExpense: undefined,
  boardWages: undefined,
  processCost: undefined,
  quarterage: undefined,
  quarterageSubsidy: undefined,
  totalPrice: undefined,
  returnTime: undefined,
  returnContacts: undefined,
  returnResult: undefined,
  fileName: undefined,
  filePath: undefined,
  dictTaskType: undefined,
  orderNumber: undefined,
  dictOrderType: undefined,
  productName: undefined,
  customerCode: undefined,
  submitFlag: undefined,  //提交标记
})

const infoRef = ref()
const contentHeight = ref(0)
const query = useRoute().query as any

// 关闭
const tagsViewStore = useTagsViewStore()
const { currentRoute, push } = useRouter() // 路由
const goBack = async () => {
  //获取当前路由并删除tagView
  tagsViewStore.delView(currentRoute.value)
  push('/quality/quality/maintenanceManagement/maintainPostServiceTask')
}

/** 获取数据 */
const getData = async () => {
  formType.value = query.type
  formLoading.value = true
  try {
    formData.value = await MaintainPostServiceTaskApi.getMaintainPostServiceTask(query.id)
  } finally {
    formLoading.value = false
  }
}

/** 提交表单 */
const submitForm = async (type: string) => {
  // 提交请求
  formLoading.value = true
  try {
    const data = infoRef.value.formData as unknown as MaintainPostServiceTaskApi.MaintainPostServiceTaskVO
    console.log(data)
    data.submitFlag = type === 'save' ? 1 : 2
    await MaintainPostServiceTaskApi.updateMaintainPostServiceTask(data)
    message.success('操作成功')
    goBack()
  } finally {
    formLoading.value = false
  }
}

// 打印
const printService = () => {
  let winName, head, bdHtml;
  winName = window.open("", "_blank", ""); // 新窗口
  head = '<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />'
  const tabStyle = 
  `<style>
    .title {
      font-size: 34px;
      font-weight: bold;
      width: 200px;
      text-align: center;
      margin: 10px auto 0;
    }

    .logo {
      width: 200px;
      height: 50px;
      float: left;
    }

    .d-flex {
      display: flex;
    }
    .flex-wrap {
      flex-wrap: wrap;
    }

    .align-center {
      align-items: center;
    }

    .add-btn {
      padding: 10px 0;
    }

    .pl-10px {
      padding-left: 10px;
    }

    .pr-10px {
      padding-right: 10px;
    }

    .item-name {
      width: 20%;
      box-sizing: border-box;
    }

    .item-value {
      width: 40%;
      box-sizing: border-box;
    }

    .border-top {
      border-top: 1px solid #000;
    }

    .border-bottom {
      border-bottom: 1px solid #000;
    }

    .border-left {
      border-left: 1px solid #000;
    }

    .border-right {
      border-right: 1px solid #000;
    }

    .tab {
      width: 100%;
      text-align: center;
      border: 1px solid #000;
      margin-top: 10px;
    }

    .item-title {
      width: 10%;
    }

    .word-wrap {
      word-wrap: break-word;
    }

    .width-23 {
      width: 23.3%;
    }

    .width-20 {
      width: 20%;
    }

    .width-30 {
      width: 30%;
    }

    .width-33 {
      width: 33.3%;
    }

    .width-40 {
      width: 40%;
    }

    .width-50 {
      width: 50%;
    }
    
    .width-60 {
      width: 60%;
    }

    .width-90 {
      width: 90%;
    }

    .height-30 {
      height: 30px;
      line-height: 30px;
    }

    .width-56 {
      width: 56.8%;
    }

    .height-61 {
      height: 61px;
      line-height: 61px;
    }

    .height-94 {
      height: 94px;
      line-height: 94px;
    }
    
    .height-97 {
      height: 97px;
      line-height: 97px;
    }

    .el-textarea {
      width: 90%;
      border-left: 1px solid #000;
    }

    .area {
      text-align: left;
      line-height: normal;
      padding: 10px;
      box-sizing: border-box;
      height: 150px;
    }

    .service  {
      border-bottom: 1px solid #000;
    }

    .service-wrap:last-child .service:last-child  {
      border-bottom: none;
    }

    .el-input__wrapper, .el-textarea__inner {
      box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
    }

    .justify-center {
      justify-content: center;
    }

    .faults {
      background-color: #fff;
      width: 90%;
    }

    .faults-item {
      width: 50%;
      box-sizing: border-box;
    }
  </style>`
  head += tabStyle;
  bdHtml = window.document.querySelector("#printData").innerHTML;
  winName.document.head.innerHTML = head;
  winName.document.body.innerHTML = bdHtml;
  winName.focus(); //聚焦保证页面正常
  setTimeout(() => {
    winName.print();
  }, 500);
}

onMounted(async () => {
  contentHeight.value = document.body.clientHeight - 125
  getData()
})
</script>
<style lang="scss" scoped>
:deep(.el-scrollbar) {
  height: auto;
}
</style>
